import React, { useMemo } from 'react';
import { Position } from 'reactflow';

import { t } from '@/locales/i18n';
import { FlowNodeOutputTypeEnum } from '@/types/workflow/constant';
import { FlowNodeOutputItemType } from '@/types/workflow/io';
import { getHandleId } from '@/types/workflow/utils';

import { SourceHandle } from '../Handle';

const OutputLabel = ({ nodeId, output }: { nodeId: string; output: FlowNodeOutputItemType }) => {
  const { label = '', description, valueType, valueDesc } = output;

  const Render = useMemo(() => {
    return (
      <div className="relative">
        <div className="flex items-center justify-between gap-2 rounded-lg bg-white p-1">
          <div className="flex items-center gap-3">
            {/* <div className="from-red-400 flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-r to-pink-500">
              <SvgIcon icon={getIcon(valueType)} className="text-white" size={22} />
            </div> */}
            <div className="flex flex-col gap-1">
              <span className="ml-2 text-xs font-font-weight-400 text-text-4">
                {t(label as any)}
              </span>
              <span className="ml-2 text-[10px] text-text-3">{t(description as any)}</span>
            </div>
          </div>
          <div className="rounded-[4px] border border-line-2 px-2">{valueType}</div>
        </div>
        {output.type === FlowNodeOutputTypeEnum.source && (
          <SourceHandle
            nodeId={nodeId}
            handleId={getHandleId(nodeId, 'source', output.key)}
            translate={[26, 0]}
            position={Position.Right}
          />
        )}
      </div>
    );
  }, [output.type, output.key, label, description, valueType, nodeId]);

  return Render;
};

export default React.memo(OutputLabel);
